<!--
 * @Author: your name
 * @Date: 2022-04-27 09:35:26
 * @LastEditTime: 2023-06-19 10:44:03
 * @LastEditors: wangwang 2723008256@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ActiveCenter\index.vue
-->
<template>
  <div id="container">
    <main>
      <!-- 上半部分 -->
      <div class="top">
        <div class="lunbo" v-if="bannerLists.length == 1">
          <el-carousel
            indicator-position="none"
            height="240px"
            arrow="never"
            :autoplay="false"
          >
            <el-carousel-item v-for="item in bannerLists" :key="item.id">
              <img :src="item.file_url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 无BANNER -->
        <div>
          <div
            class="noActive"
            style="width: 700px; height: 240px; background: #ccc"
            v-if="bannerLists.lenght == 0"
          >
            <!-- <img src="../../assets/img/noActive.png" alt="" /> -->
          </div>
        </div>
        <div class="lunbo" v-if="bannerLists.length > 1">
          <el-carousel
            indicator-position="none"
            height="240px"
            arrow="always"
            :autoplay="false"
          >
            <el-carousel-item v-for="item in bannerLists" :key="item.id">
              <img :src="item.file_url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <div class="toptaptitle">
            <p class="firsttap">累计全部</p>
            <p>系列活动</p>
            <p>主题活动</p>
          </div>
          <div class="msg">
            <img src="../../assets/img/active/active_1.png" alt="" />
            <p>视频观看</p>
            <div class="Num">
              <span>{{ tjdata.spgk_all }}</span
              >个
            </div>
            <div class="Num">
              <span>{{ tjdata.spgk_2 }}</span
              >个
            </div>
            <div class="Num">
              <span>{{ tjdata.spgk_1 }}</span
              >个
            </div>
          </div>
          <div class="msg">
            <img src="../../assets/img/active/active_2.png" alt="" />
            <p>累计时长</p>
            <div class="Num">
              <span v-show="tjdata.ljsc_all / 60 >= 1">{{
                Math.floor(tjdata.ljsc_all / 60)
              }}</span>
              <a v-show="tjdata.ljsc_all / 60 >= 1">小时</a>
              <span>{{ Math.floor(tjdata.ljsc_all % 60) }}</span
              ><a>分钟</a>
            </div>
            <div class="Num">
              <span v-show="tjdata.ljsc_2 / 60 >= 1">{{
                Math.floor(tjdata.ljsc_2 / 60)
              }}</span>
              <a v-show="tjdata.ljsc_2 / 60 >= 1">小时</a>
              <span>{{ Math.floor(tjdata.ljsc_2 % 60) }}</span
              ><a>分钟</a>
            </div>
            <div class="Num">
              <span v-show="tjdata.ljsc_1 / 60 >= 1">{{
                Math.floor(tjdata.ljsc_1 / 60)
              }}</span>
              <a v-show="tjdata.ljsc_1 / 60 >= 1">小时</a>
              <span>{{ Math.floor(tjdata.ljsc_1 % 60) }}</span
              ><a>分钟</a>
            </div>
          </div>
          <div class="msg">
            <img src="../../assets/img/active/active_3.png" alt="" />
            <p>今日学习</p>
            <div class="Num">
              <span>{{ tjdata.jrxx_all }}</span
              >分钟
            </div>
            <div class="Num">
              <span>{{ tjdata.jrxx_2 }}</span
              >分钟
            </div>
            <div class="Num">
              <span>{{ tjdata.jrxx_1 }}</span
              >分钟
            </div>
          </div>
        </div>
      </div>
      <!-- 教师列表 -->
      <div class="teacherShow">
        <div class="leftAn" @click="leftAn">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="rightAn" @click="rightAn">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="teacherLists">
          <div
            class="teacherBox"
            v-for="(item, index) in teacherLists.concat(
              teacherLists.slice(0, 8)
            )"
            :key="index"
            @click="showTeacher(index)"
          >
            <div class="pic">
              <img :src="item.file_url" alt="" />
            </div>
            <h5>{{ item.title }}</h5>
            <p>{{ item.zhicheng }}</p>
          </div>
        </div>
        <el-dialog :visible.sync="dialogVisibleTc" width="480px">
          <div class="teacherShow">
            <div class="personal">
              <img :src="showtcFile_url" alt="" />
              <div class="pertitle">
                <h4>{{ showtcTitle }}</h4>
                <p>{{ showtcZhicheng }}</p>
              </div>
            </div>
            <div class="msg">
              <p v-for="item in showtcMsg" :key="item">
                <span></span>
                <a>{{ item }}</a>
              </p>
            </div>
            <div class="dosome">
              <div class="nomore" v-show="tcindex == 0">上一位</div>
              <div class="pre" v-show="tcindex > 0" @click="preTc">上一位</div>
              <div class="nomore" v-show="tcindex == teacherLists.length - 1">
                下一位
              </div>
              <div
                class="next"
                v-show="tcindex < teacherLists.length - 1"
                @click="nextTc"
              >
                下一位
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <div class="content">
        <div class="left" v-show="activeLists.length > 0">
          <div class="top">
            <h2>教研活动</h2>
          </div>
          <!-- 没有活动的时候 -->
          <!-- <div class="nothing" v-if="false">
            <img src="../../assets/img/nothing.png" alt="" />
          </div> -->
          <div class="activeLists">
            <div
              class="activeBox"
              v-for="item in activeLists"
              :key="item.id"
              @click="goActiveDetails(item.id)"
            >
              <div class="pic">
                <img :src="item.file_url" alt="" />
              </div>
              <div class="msg">
                <div class="boxtitle">
                  {{ item.title }}
                </div>
                <div class="update" v-show="item.type_id == 2">
                  <h6>近期更新：</h6>
                  <span v-for="list in item.gx_lists" :key="list.id"
                    >{{ list.title }} {{ list.zhang_title }}</span
                  >
                </div>
                <div class="yuyuemsg" v-if="false && item.type_id == 1">
                  为教学团队定制一份专属的活动课表吧
                </div>
                <div
                  class="activetime"
                  v-if="
                    item.type_id == 1 &&
                    item.end_time * 1000 >= new Date().getTime()
                  "
                >
                  活动时间：{{
                    timeStamp2String(item.start_time * 1000, 2)
                  }}
                  （{{ timeStamp2String(item.start_time * 1000, 11) }}）{{
                    timeStamp2String(item.start_time * 1000, 5)
                  }}
                </div>
                <div
                  class="upnum"
                  v-if="
                    item.hdxd_nums > 0 &&
                    item.type_id == 1 &&
                    item.end_time * 1000 < new Date().getTime()
                  "
                >
                  活动心得已更新<a>{{ item.hdxd_nums }}</a
                  >份
                </div>
                <div
                  class="noxinde"
                  v-if="
                    item.hdxd_nums == 0 &&
                    item.end_time * 1000 < new Date().getTime() &&
                    item.type_id == 1
                  "
                >
                  暂无活动心得上传更新
                </div>
              </div>
              <div class="dosome">
                <div
                  class="gostudy"
                  v-if="item.type_id == 2 && item.bm_status == 1"
                >
                  进入学习
                </div>
                <div
                  class="goyuyue"
                  v-if="item.type_id == 2 && item.bm_status == 0"
                >
                  立即预约
                </div>
                <!-- 直播未开始，未报名 -->
                <div
                  class="gobm"
                  v-if="
                    item.type_id == 1 &&
                    item.bm_status != 1 &&
                    item.start_time * 1000 > new Date().getTime()
                  "
                >
                  去报名
                </div>
                <!-- 直播未开始，已报名 -->
                <div
                  class="gobm"
                  v-if="
                    item.type_id == 1 &&
                    item.bm_status == 1 &&
                    item.start_time * 1000 > new Date().getTime()
                  "
                >
                  已报名
                </div>
                <!-- 直播一开始,不考虑是否报名 -->
                <div
                  class="gozhibo"
                  v-if="
                    item.type_id == 1  &&
                    item.start_time * 1000 < new Date().getTime() &&
                    item.end_time * 1000 > new Date().getTime()
                  "
                >
                  直播中
                </div>
              <!-- 直播已结束,有回放,不考虑是否报名 -->
                <div
                  class="gohuifang"
                  v-if="
                    item.type_id == 1 &&
                    item.end_time * 1000 < new Date().getTime() && item.have_video == 1
                  "
                >
                  查看回放
                </div>
              <!-- 直播已结束,无回放,不考虑是否报名 -->
                <div
                  class="gohuifang"
                  v-if="
                    item.type_id == 1 &&
                    item.end_time * 1000 < new Date().getTime() && item.have_video != 1
                  "
                >
                  活动已结束
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left noactive" v-show="activeLists.length == 0">
          <div class="bg">
            <img src="../../assets/img/4.2/noactiveLists.png" alt="" />
          </div>
          <div class="evm">
            <img :src="dqevm" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="activexinde">
            <div class="boxtitle">
              <div class="xindetitle">
                <img src="../../assets/img/4.2/4.2activexinde.png" alt="" />
                <h4>活动心得</h4>
              </div>
              <div class="changesome" @click="getmorexinde">
                <i class="el-icon-refresh-right"></i>
                换一批
              </div>
            </div>
            <div class="xindeLists">
              <div
                class="xinde"
                v-for="(item, index) in xindeLists"
                :key="item.id"
              >
                <h3>{{ index + 1 }}.{{ item.title }}</h3>
                <div class="details">
                  <p>{{ item.author }}</p>
                  <span @click="handleClick(item.id)">查看预览</span>
                </div>
              </div>
            </div>
            <el-dialog :visible.sync="dialogVisibleXd" width="880px">
              <div class="picList">
                <div class="pic" v-for="item in yulanPics" :key="item.id">
                  <img :src="item.file_url" alt="" />
                </div>
              </div>
            </el-dialog>
          </div>
          <div class="teacherPingjia" v-if="activeLists.length > 4">
            <div class="boxtitle">
              <div class="xindetitle">
                <img src="../../assets/img/4.2/4.2activepingjia.png" alt="" />
                <h4>教师评价</h4>
              </div>
            </div>
            <div class="pjbox" @mouseenter="mouseTe1" @mouseleave="mouseTl1">
              <div class="pingjiaLists">
                <p
                  v-for="(item, index) in activePjLists.concat(
                    activePjLists.slice(0, 7)
                  )"
                  :key="index"
                >
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
          <div
            class="teacherPingjia"
            style="height: 150px"
            v-if="activeLists.length <= 4"
          >
            <div class="boxtitle">
              <div class="xindetitle">
                <img src="../../assets/img/4.2/4.2activepingjia.png" alt="" />
                <h4>教师评价</h4>
              </div>
            </div>
            <div
              class="pjbox little"
              style="height: 120px"
              @mouseenter="mouseTe1"
              @mouseleave="mouseTl1"
            >
              <div class="pingjiaLists">
                <p
                  v-for="(item, index) in activePjLists.concat(
                    activePjLists.slice(0, 2)
                  )"
                  :key="index"
                >
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="picShow">
        <div class="thirdBox">
          <div class="title">
            <span></span>
            <h3>活动照片</h3>
          </div>
          <div
            class="activeStyle"
            @mouseenter="mouseTe2"
            @mouseleave="mouseTl2"
          >
            <span
              class="leftN anniu"
              @click="styleLeft"
              v-if="fcPicList.length > 4"
              ><i class="el-icon-arrow-left"></i
            ></span>
            <span
              class="rightN anniu"
              @click="styleRight"
              v-if="fcPicList.length > 4"
              ><i class="el-icon-arrow-right"></i>
            </span>
            <div class="styleDeatils" style="height: 200px" v-if="!fcNothing">
              <ul class="styleLists">
                <li
                  v-for="(item, index) in fcPicList.concat(
                    fcPicList.slice(0, 4)
                  )"
                  :key="index"
                >
                  <el-image
                    :src="item.file_url_resize"
                    :preview-src-list="yulanArrF"
                  >
                  </el-image>
                </li>
              </ul>
            </div>
            <div class="nothing" v-if="fcNothing">
              <img src="../../assets/img/nothing.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { timeStamp2String } from "../../utils/time";
import {
  activitytop,
  activitytj,
  activitylists,
  activitycg,
  info_activityhdxd,
  userinfo,
  list_teachers,
  banner,
  list_activityhdxd,
  activitylists02,
  list_activitypj,
  list_activityimg02,
  activitytj_new,
  loc_kefuewm,
} from "../../api/http";
export default {
  data() {
    return {
      timeStamp2String,
      timeNow: "", //当前时间的时间戳
      tjShow: false, //是否显无主题图
      zhutiList: [], //顶部主题列表
      jiantou: false, //箭头是否出现
      tjdata: {}, //数据统计总
      video_nums: "", //学习的视频数量
      video_times_hours: "", //总学习小时
      video_times_min: "", //总学习分钟
      video_times_date: "", //今日学习时间
      jiaoyanList: [], //教研活动列表
      nothingShow: false, //是否展示空图
      //图片轮播列表
      picLists: [],
      teacherNothing: false, //教师评价模块空图显示
      fcPicList: [], //风采图片
      fcNothing: false, //风采模块空图显示
      yulanArrT: [], //预览活动评价图组
      yulanArrF: [], //预览活动风采图组
      dialogVisibleTc: false, //预览的显示
      currentPage: 1, //分页默认选中页
      tapRadio: 1, //下半部分内容切换
      //表格数据
      tableData: [],
      yulanPics: [], //心得表格预览信息

      picMoveWidth: 0, //第一种图片位移距离
      stykeMoveWidth: 0, //第二种图片位移距离

      //4.2版本迭代
      kemu_id: "", //科目
      bannerLists: [], //banner列表
      teacherLists: [], //教师列表
      xdpage: 1, //活动心得page
      xindeLists: [], //活动心得列表
      tcindex: "", //选中查看的教师下标
      showtcFile_url: "", //教师弹窗头像
      showtcTitle: "", //教师弹窗姓名
      showtcZhicheng: "", //教师弹窗简介
      showtcMsg: [], //教师弹窗介绍
      dialogVisibleXd: false, //心得弹窗
      activeLists: [], //活动列表
      activePjLists: [], //活动评价列表
      steep: 0, //教师列表移动
      steep1: 0, //教师评价移动速度
      steep2: 0, //活动图片移动速度
      timer: null,
      timer2: null,
      acindex: 2,
      xdallnum: 0, //心得总数量
      steepHeight: 0,

      dqevm: "", //地区客服二维码
    };
  },
  components: {},
  created() {
    this.getTeachers(); //获取教师列表
    this.getbanner(); //获取活动主页banner
    this.getactiveTj(); //获取活动统计数据
    this.getacList(); //获取活动主页活动列表

    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    this.timeNow = Date.now();
    console.log(Date.now() > 1659139200 * 1000);

    //判断过期
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "geren xinxi ");
      if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
        this.$router.push({
          name: "Login",
          query: {
            isgq: 1,
          },
        });
      } else {
        this.kemu_id = res.retRes.kemu_id;
        list_activityhdxd({
          md5key: localStorage.getItem("md5key"),
          type_id: 1,
          kemu_id: this.kemu_id,
        }).then((res) => {
          console.log(res, "活动心得");
          this.xdallnum = res.retRes.length;
          console.log(this.xdallnum, "caonima ");
        });
        this.getactivePj(); //获取活动评价
        this.getactiveImg(); //获取活动图片
      }
    });
    loc_kefuewm({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "diqu erweima ");
      this.dqevm = res.retRes.kefu_file_url;
    });
  },
  mounted() {
    //重定向
    localStorage.setItem("path", "");
    setTimeout(() => {
      // let leftN2 = document.getElementsByClassName("styleLists")[0];
      // leftN2.style.transition = null;
      // this.timer2 = setInterval(() => {
      //   this.steep2 -= 2;
      //   leftN2.style.left = this.steep2 + "px";
      //   console.log();
      //   if (this.steep2 <= -(leftN2.clientWidth - 1172)) {
      //     this.steep2 = 0;
      //   }
      // }, 20);
      // const steepHeight = 430
      if (this.activeLists.length > 4) {
        this.steepHeight = 430;
      } else {
        this.steepHeight = 120;
      }
      let pingjiaLists = document.getElementsByClassName("pingjiaLists")[0];
      // pingjiaLists.style.transition = null;
      this.timer = setInterval(() => {
        this.steep1 -= 0.3;
        pingjiaLists.style.top = this.steep1 + "px";
        if (this.steep1 <= -(pingjiaLists.clientHeight - this.steepHeight)) {
          this.steep1 = 0;
        }
      }, 10);
    }, 300);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
  },
  methods: {
    //获取活动主页banner
    getbanner() {
      banner({
        md5key: localStorage.getItem("md5key"),
        systypes_id: 10003,
        device_type_id: 201,
      }).then((res) => {
        console.log(res, "活动主页banner");
        this.bannerLists = res.retRes;
      });
    },
    //获取活动统计
    getactiveTj() {
      activitytj_new({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "活动统计数据");
          const data = res.retRes;
          this.tjdata = res.retRes;
          // this.video_nums = data.video_nums;
          // this.video_times_hours = Math.floor(data.video_times / 60);
          // this.video_times_min = Math.floor(data.video_times % 60);
          // this.video_times_date = data.video_times_date;
        }
      });
    },
    //获取教师列表
    getTeachers() {
      list_teachers({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res, "教师列表");
        this.teacherLists = res.retRes;
      });
    },
    //获取活动列表
    getacList() {
      activitylists02({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: 401, //教研活动
      }).then((res) => {
        console.log(res);
        this.activeLists = res.retRes;
        this.getxinde(); //获取活动心得
      });
    },
    //获取心得
    getxinde() {
      if (this.activeLists.length > 4) {
        list_activityhdxd({
          md5key: localStorage.getItem("md5key"),
          type_id: 1,
          kemu_id: this.kemu_id,
          page: this.xdpage,
          page_size: 5,
        }).then((res) => {
          this.xindeLists = res.retRes;
        });
      } else {
        list_activityhdxd({
          md5key: localStorage.getItem("md5key"),
          type_id: 1,
          kemu_id: this.kemu_id,
          // tj_status: 1,
          // of: "sj",
          page: this.xdpage,
          page_size: 2,
        }).then((res) => {
          this.xindeLists = res.retRes;
        });
      }
    },
    //换一批心得
    getmorexinde() {
      this.xdpage++;
      if (this.activeLists.length > 4) {
        if (this.xdpage <= this.xdallnum / 5 + 1) {
          this.getxinde(); //获取活动心得
        } else {
          this.xdpage = 1;
          this.getxinde(); //获取活动心得
        }
      } else {
        if (this.xdpage <= this.xdallnum / 2) {
          this.getxinde(); //获取活动心得
        } else {
          this.xdpage = 1;
          this.getxinde(); //获取活动心得
        }
      }
    },
    //获取活动评价
    getactivePj() {
      list_activitypj({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
      }).then((res) => {
        console.log(res, "活动评价");
        this.activePjLists = res.retRes;
      });
    },
    //获取活动图片
    getactiveImg() {
      list_activityimg02({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
      }).then((res) => {
        console.log(res, "活动图片");
        this.fcPicList = res.retRes;
        if (this.fcPicList.length == 0) {
          this.fcNothing = true;
        } else {
          this.fcNothing = false;
        }
        console.log(this.fcPicList.concat(this.fcPicList.slice(0, 4)));
        this.yulanArrF = [];
        res.retRes.forEach((item) => {
          this.yulanArrF.push(item.file_url);
        });
      });
    },
    //教师展示左右按钮
    leftAn() {
      const picWidth = 148;
      this.picMoveWidth += 148;
      let leftN = document.querySelector(".teacherLists");
      leftN.style.left = this.picMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      console.log(this.picMoveWidth);
      // console.log(leftN.style.left);
      this.steep = this.picMoveWidth;
      if (this.picMoveWidth >= 148) {
        setTimeout(() => {
          leftN.style.transition = "left 0s ease-in-out";
          leftN.style.left = -picWidth * (this.teacherLists.length - 1) + "px";
          this.picMoveWidth = -picWidth * (this.teacherLists.length - 1);
          this.steep = -picWidth * (this.teacherLists.length - 1);
        }, 500);
      }
    },
    rightAn() {
      let leftN = document.querySelector(".teacherLists");
      // console.log(leftN)
      // leftN.style.left = "100px"
      leftN.style.transition = "all 0.5s ease-in-out";
      const picWidth = 148;
      this.picMoveWidth -= 148;
      this.steep = this.picMoveWidth;
      leftN.style.left = this.picMoveWidth + "px";
      // console.log(this.picMoveWidth);
      console.log(this.picMoveWidth, -picWidth * this.teacherLists.length);
      if (this.picMoveWidth <= -picWidth * this.teacherLists.length) {
        setTimeout(() => {
          leftN.style.transition = "left 0s ease-in-out";
          leftN.style.left = 0 + "px";
          this.picMoveWidth = 0;
          this.steep = 0;
        }, 500);
      }
    },
    //展示教师信息
    showTeacher(index) {
      this.tcindex = index;
      this.dialogVisibleTc = true;
      this.showtcFile_url = this.teacherLists[this.tcindex].file_url;
      this.showtcTitle = this.teacherLists[this.tcindex].title;
      this.showtcZhicheng = this.teacherLists[this.tcindex].zhicheng;
      const msg = this.teacherLists[this.tcindex].sub_title;
      msg.replace(";", "；"); //替换可能存在的英文分号为中文分号
      this.showtcMsg = msg.split("；"); //根据中文分号分隔文字为数组
    },
    //弹窗上一位老师
    preTc() {
      this.tcindex--;
      this.showtcFile_url = this.teacherLists[this.tcindex].file_url;
      this.showtcTitle = this.teacherLists[this.tcindex].title;
      this.showtcZhicheng = this.teacherLists[this.tcindex].zhicheng;
      const msg = this.teacherLists[this.tcindex].sub_title;
      msg.replace(";", "；"); //替换可能存在的英文分号为中文分号
      this.showtcMsg = msg.split("；"); //根据中文分号分隔文字为数组
    },
    //弹窗下一位老师
    nextTc() {
      this.tcindex++;
      this.showtcFile_url = this.teacherLists[this.tcindex].file_url;
      this.showtcTitle = this.teacherLists[this.tcindex].title;
      this.showtcZhicheng = this.teacherLists[this.tcindex].zhicheng;
      const msg = this.teacherLists[this.tcindex].sub_title;
      msg.replace(";", "；"); //替换可能存在的英文分号为中文分号
      this.showtcMsg = msg.split("；"); //根据中文分号分隔文字为数组
    },
    //展示预览
    handleClick(id) {
      this.dialogVisibleXd = true;
      console.log(id); //哪一个心得
      info_activityhdxd({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "活动心得预览");
          this.yulanPics = res.retRes.file_lists;
        } else {
          console.log(res.retErr);
        }
      });
    },
    //去详情
    goActiveDetails(id) {
      let { href } = this.$router.resolve({
        path: "/active/activeDetails",
        query: {
          id: id,
        },
      });
      window.open(href, "activeRes");
    },
    //鼠标移动到教师评价里
    mouseTe1() {
      clearInterval(this.timer);
      this.timer = null;
    },
    //鼠标移出教师评价
    mouseTl1() {
      let pingjiaLists = document.getElementsByClassName("pingjiaLists")[0];
      this.timer = setInterval(() => {
        this.steep1 -= 0.3;
        pingjiaLists.style.top = this.steep1 + "px";
        if (this.steep1 <= -(pingjiaLists.clientHeight - this.steepHeight)) {
          this.steep1 = 0;
        }
      }, 10);
    },
    //鼠标移动到活动风采里
    mouseTe2() {
      // clearInterval(this.timer2);
      // this.timer2 = null;
    },
    //鼠标移出活动风采
    mouseTl2() {
      // let leftN2 = document.getElementsByClassName("styleLists")[0];
      // this.timer2 = setInterval(() => {
      //   this.steep2 -= 2;
      //   leftN2.style.left = this.steep2 + "px";
      //   console.log();
      //   if (this.steep2 <= -(leftN2.clientWidth - 1172)) {
      //     this.steep2 = 0;
      //   }
      // }, 20);
    },
    //活动风采轮播左按钮
    styleLeft() {
      const styPicWidth = 293;
      this.stykeMoveWidth += 293;
      const styleWidth = 1158; //可视宽度
      let leftN = document.getElementsByClassName("styleLists")[0];
      leftN.style.left = this.stykeMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      this.steep2 = this.picMoveWidth;
      console.log(this.stykeMoveWidth);
      if (this.stykeMoveWidth > 0) {
        leftN.style.left = -styPicWidth * (this.fcPicList.length - 4) + "px";
        console.log(leftN.style.left);
        this.stykeMoveWidth = -styPicWidth * (this.fcPicList.length - 4);
        this.steep2 = -styPicWidth * (this.fcPicList.length - 4);
      }
    },
    //活动风采轮播右按钮
    styleRight() {
      const styPicWidth = 293;
      this.stykeMoveWidth -= 293;
      let leftN = document.getElementsByClassName("styleLists")[0];
      leftN.style.left = this.stykeMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      this.steep2 = this.stykeMoveWidth;
      console.log(this.stykeMoveWidth);
      if (this.stykeMoveWidth == -styPicWidth * (this.fcPicList.length - 4)) {
        leftN.style.left = -styPicWidth * (this.fcPicList.length - 4) + "px";
        this.steep2 = -styPicWidth * (this.fcPicList.length - 4);
      }
      if (this.stykeMoveWidth < -styPicWidth * (this.fcPicList.length - 4)) {
        leftN.style.left = 0 + "px";
        this.stykeMoveWidth = 0;
        this.steep2 = 0;
      }
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style>
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f2f5;
  main {
    margin: 0 auto;
    margin-top: 20px;
    width: 1200px;
    background-color: #f0f2f5;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .lunbo {
        width: 700px;
        height: 240px;
        border-radius: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .noActive {
        width: 700px;
        img {
          width: 700px;
        }
      }
      .right {
        width: 480px;
        height: 240px;
        background-image: url(../../assets/img/4.2/4.2informationbg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        border-radius: 10px;
        .toptaptitle {
          display: flex;
          margin-top: 25px;
          margin-bottom: 17px;
          font-size: 14px;
          color: #333;
          p {
            margin-left: 50px;
          }
          .firsttap {
            margin-left: 178px;
          }
        }
        .msg {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          text-align: center;
          img {
            margin-left: 20px;
            margin-right: 12px;
            width: 40px;
            height: 40px;
            background: #defdfa;
            border-radius: 20px;
          }
          p {
            margin-right: 22px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 40px;
          }
          .Num {
            // margin-right: 10px;
            width: 110px;
            text-align: center;
            font-size: 12px;
            color: #939599;
            font-family: Microsoft YaHei;
            span {
              display: inline-block;
              font-size: 18px;
              font-family: DIN;
              font-weight: bold;
              color: #08a579;
            }
          }
        }
      }
    }
    .teacherShow {
      position: relative;
      margin: 0 auto;
      margin-bottom: 20px;
      width: 1200px;
      background: #ffffff;
      overflow: hidden;
      .leftAn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 25px;
        height: 35px;
        background: #000000;
        opacity: 0.3;
        border-radius: 0px 18px 18px 0px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
        z-index: 1;
        i {
          font-size: 14px;
          color: #fff;
        }
      }
      .rightAn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 25px;
        height: 35px;
        background: #000000;
        opacity: 0.3;
        border-radius: 18px 0px 0px 18px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
        z-index: 1;
        i {
          font-size: 14px;
          color: #fff;
        }
      }
      .leftAn:hover {
        opacity: 0.5;
      }
      .rightAn:hover {
        opacity: 0.5;
      }
      .teacherLists {
        display: flex;
        position: relative;
        border-radius: 10px;
        position: relative;
        left: 0px;
        cursor: pointer;
        .teacherBox {
          display: flex;
          flex-direction: column;
          // justify-content: center;
          align-items: center;
          margin-left: 48px;
          width: 100px;

          .pic {
            position: relative;
            margin-top: 32px;
            margin-bottom: 12px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            img {
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 100px;
              height: 100px;
              object-fit: contain;
              border-radius: 50%;
            }
          }
          h5 {
            margin-bottom: 7px;
            font-size: 14px;
            color: #333;
            font-weight: 600;
          }
          p {
            margin-bottom: 30px;
            text-align: center;
            font-size: 12px;
            color: #999;
          }
        }
        .teacherBox:first-of-type {
          margin-left: 32px;
        }
        .teacherBox:hover {
          h5 {
            color: #08a579;
          }
        }
      }

      /deep/.el-dialog {
        border-radius: 20px;
      }
      .teacherShow {
        width: 400px;
        .personal {
          display: flex;
          align-items: center;
          margin-bottom: 29px;
          img {
            margin-right: 18px;
            width: 72px;
            border-radius: 50%;
          }
          .pertitle {
            h4 {
              margin-bottom: 12px;
              font-size: 16px;
              color: #333;
            }
            p {
              font-size: 14px;
              color: #666;
            }
          }
        }
        .msg {
          p {
            display: flex;
            color: #969799;
            line-height: 36px;
            span {
              position: relative;
              top: 13px;
              display: inline-block;
              margin-right: 12px;
              width: 8px;
              height: 8px;
              background: #d9dbde;
              opacity: 0.6;
              border-radius: 50%;
            }
            a {
              display: inline-block;
              width: 370px;
            }
          }
        }
        .dosome {
          display: flex;
          justify-content: space-around;
          margin-top: 30px;
          div {
            text-align: center;
            color: #fff;
            line-height: 32px;
            width: 100px;
            height: 32px;
            border-radius: 16px;
            cursor: pointer;
            background-color: #08a579;
          }
          .nomore {
            background-color: #d5d9de;
          }
        }
      }
    }
    .content {
      display: flex;
      margin: 0 auto;
      margin-bottom: 20px;
      width: 1200px;
      .left {
        margin-right: 20px;
        width: 800px;
        background: #ffffff;
        border-radius: 10px;
        .top {
          margin: 19px;
          h2 {
            font-size: 18px;
            color: #333;
          }
        }
        .activeLists {
          .activeBox {
            position: relative;
            display: flex;
            margin-left: 20px;
            margin-bottom: 20px;
            cursor: pointer;
            .pic {
              margin-right: 19px;
              width: 240px;
              height: 136px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
              }
            }
            .msg {
              position: relative;
              .boxtitle {
                margin-top: 10px;
                font-size: 14px;
                color: #333;
              }
              .update {
                margin-top: 18px;
                line-height: 24px;
                h6 {
                  font-size: 12px;
                  color: #333;
                }
                span {
                  display: block;
                  color: #939599;
                }
              }
              .yuyuemsg,
              .activetime,
              .upnum,
              .noxinde {
                position: absolute;
                bottom: 8px;
                width: 300px;
                // margin-top: 84px;
                font-size: 12px;
                color: #939599;
                a {
                  color: #f75059;
                }
              }
            }
            .dosome {
              div {
                position: absolute;
                right: 20px;
                bottom: 0;
                text-align: center;
                line-height: 32px;
                font-size: 12px;
                color: #fff;
                width: 100px;
                height: 32px;
                border-radius: 16px;
              }
              .gostudy {
                background: #08a579;
              }
              .goyuyue {
                background: #f85230;
              }
              .goyuyue,
              .gozhibo,
              .gobm {
                background: #f85230;
              }
              .gohuifang {
                background: #cccccc;
              }
            }
          }
        }
      }
      .noactive {
        position: relative;
        .bg {
          img {
            border-radius: 10px;
          }
        }
        .evm {
          position: absolute;
          left: 50%;
          bottom: 50px;
          transform: translateX(-50%);
          width: 150px;
          img {
            width: 150px;
          }
        }
      }
      .right {
        .activexinde {
          // padding-bottom: 20px;
          width: 380px;
          background: #ffffff;
          border-radius: 10px;
          overflow: hidden;
          .boxtitle {
            display: flex;
            justify-content: space-between;
            margin: 19px 16px;
            // margin-bottom: 10px;
            .xindetitle {
              display: flex;
              align-items: center;
              img {
                margin-right: 5px;
                width: 24px;
              }
              h4 {
                font-size: 18px;
                color: #333;
              }
            }
            .changesome {
              margin-right: 17px;
              font-size: 12px;
              color: #999;
              cursor: pointer;
            }
          }
          .xindeLists {
            margin-left: 19px;

            color: #646566;
            // line-height: 34px;
            .xinde {
              margin-bottom: 20px;
              h3 {
                width: 330px;
                font-size: 14px;
                color: #646566;
                font-weight: normal;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .details {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
                width: 330px;
                font-size: 12px;
                p {
                  color: #969799;
                }
                span {
                  color: #999;
                  cursor: pointer;
                }
                span:hover {
                  color: #08a579;
                }
              }
            }
          }
          /deep/.el-dialog {
            margin-top: 3vh !important;
            padding: 20px;
            border-radius: 14px;
            width: 880px !important;
            height: 91%;
          }
          /deep/.el-dialog__header {
            padding-top: 40px;
          }
          /deep/.el-dialog__body {
            padding: 0;
            .picList {
              height: 82vh;
              overflow-y: scroll;
              .pic {
                img {
                  width: 810px;
                }
              }
            }
            ::-webkit-scrollbar {
              width: 7px;
            }
            ::-webkit-scrollbar-track {
              background-color: #f5f5f5;
              -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
              border-radius: 5px;
            }
            ::-webkit-scrollbar-thumb {
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 5px;
            }
            ::-webkit-scrollbar-button {
              background-color: #eee;
              display: none;
            }
            ::-webkit-scrollbar-corner {
              background-color: black;
            }
          }
        }
        .teacherPingjia {
          margin-top: 20px;
          padding-bottom: 50px;
          width: 380px;
          height: 420px;
          background: #ffffff;
          border-radius: 10px;
          overflow: hidden;
          .boxtitle {
            display: flex;
            justify-content: space-between;
            margin: 18px 16px;
            .xindetitle {
              display: flex;
              align-items: center;
              img {
                margin-right: 5px;
                width: 24px;
              }
              h4 {
                font-size: 18px;
                color: #333;
              }
            }
          }
          .pjbox {
            position: relative;
            margin: 0 auto;
            height: 385px;
            width: 335px;
            overflow: hidden;
            .pingjiaLists {
              position: absolute;
              top: 0;
              p {
                display: flex;
                align-items: center;
                padding: 15px;
                margin-bottom: 12px;
                width: 317px;
                font-size: 14px;
                background: #f5f7fa;
                border-radius: 4px;
                color: #646566;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .picShow {
      margin: 0 auto;
      margin-bottom: 30px;
      width: 1200px;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      .thirdBox {
        .title {
          display: flex;
          margin: 20px;
          h3 {
            font-size: 18px;
            font-weight: 600;
            color: #333;
          }
        }
        .activeStyle {
          position: relative;
          margin-bottom: 40px;

          .anniu {
            display: inline-block;
            width: 25px;
            height: 35px;
            background: #000000;
            opacity: 0.5;
            color: #fff;
            font-size: 16px;
            line-height: 33px;
            text-align: center;
            z-index: 10000;
            cursor: pointer;
            i {
              color: #fff;
            }
          }
          .leftN {
            position: absolute;
            top: 50%;
            left: 23px;
            transform: translateY(-50%);
            border-radius: 0px 18px 18px 0px;
            i {
              margin-right: 5px;
            }
          }
          .rightN {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            right: 20px;
            border-radius: 18px 0px 0px 18px;
            i {
              margin-left: 5px;
            }
          }
          .styleDeatils {
            margin: 0 auto;
            position: relative;
            width: 1160px;
            overflow: hidden;
            ul {
              display: flex;
              justify-content: space-around;
              position: absolute;
              left: 0;
              li {
                margin-right: 20px;
                width: 273px;
                height: 200px;
                // background-color: green;
                /deep/.el-image__preview {
                  width: 273px;
                  height: 200px;
                  object-fit: cover !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
